<template>
  <div id="topHome" v-show="visible" >
      <div id="mainhead" >
        <transition name="van-fade">
          <v-mainNavBar :navinfo="navinfo.options[navinfo.index]"></v-mainNavBar>
        </transition>
      </div>
      <div id="main"  style="overflow-y: auto">
        <keep-alive>
          <component :is="navinfo.options[navinfo.index].name"/>
        </keep-alive>
      </div>
      <div id="mainfooter">
        <transition  name="van-fade">
          <v-mainTabBar @changeComponent="changeComponent" :navinfo="navinfo.options"></v-mainTabBar>
        </transition>
      </div>
  </div>
</template>
<script scoped>
  const homepage =()=> import('@/components/home/homePage');
  const homegame =()=> import( '@/components/home/homeGame');
  const homeNews =()=> import( '@/components/home/homeNews');
  const homepersonal = () => import('@/components/home/homePersonal');
  const mainNavBar = () =>
    import ('@/components/header/MainNavBar');
  const mainTabBar = () =>
    import ('@/components/footer/mainTabBar');
  export default {
    name:"Container",
    components: {
      'v-mainNavBar':mainNavBar,
      'v-mainTabBar':mainTabBar,
      'homepage':homepage,
      'homegame':homegame,
      'homeNews':homeNews,
      'homepersonal':homepersonal,
    },
    data() {
      return {
        visible:false,
        navinfo: {
          index: 0,
          options: [
            {title: '江湖', leftText: '',leftIcon:'', leftLink:'', rightText: '',rightIcon:'',rightLink:'',name:'homepage',activeicon:'wap-home',icon:'home-o'},
            {title: '悬赏', leftText: '',leftIcon:'',leftLink: '', rightText: '',rightIcon:'',rightLink:'',name:'homegame',activeicon:'star',icon:'star-o'},
            {title: '客栈', leftText: '',leftIcon:'',leftLink: '', rightText: '',rightIcon:'',rightLink:'',name:'homeNews',activeicon:'chat',icon:'chat-o'},
            {title: '阅历',leftText: '',leftIcon:'', leftLink: '', rightText: '退出登陆',rightIcon:'',rightLink:'logout',name:'homepersonal',activeicon:'manager',icon:'manager-o'}
          ]
        },
        slide_h: (window.document.body.offsetHeight -98) + "px",
        imshow:false
      }
    },
    computed: {
      breadcrumb_list () {
        //获取当前的路由堆栈,并生成面包屑路径
        console.log(this.$route.matched);
        console.log(99999);
        return this.$route.matched
      }
    },
    methods:{
      changeComponent(index){
        console.log(index);
        this.navinfo.index=index;
        console.log(this.navinfo.options[this.navinfo.index]);
      },
      linkto(path){
        console.log(path);
        this.$router.push(path);
      },
    },
    beforeCreate: function() {
    },
    created: function() {
    },
    beforeMount: function() {
    },
    mounted: function() {
      this.$nextTick(()=>{
        this.visible=true;
      })
    },
    beforeUpdate: function() {
    },
    updated: function() {
    },
    activated: function() {
    },
    deactivated: function() {
    },
    beforeDestroy: function() {
    },
    destroyed: function() {
    },
    errorCaptured: function(err, vm, info) {
      vm.$store.commit("clearLoadingMap");
    }
  }
</script>
<style lang="scss" scoped>
  #topHome{
    height: 100%;
    #main{
      height:calc(100% - 98px);
    }
  }

</style>
